<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<link rel="stylesheet" href="jquery-ui-1.10.4.custom/css/base/jquery-ui-1.10.4.custom.css">
 <script type="text/javascript" src="../jQuery-2.1.4.min.js" ></script>
 <!--
 <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 --> 
  <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
	</head>
	
	
	<style>
		.xx{
			width: 900px;
			height: 200px;
			background-color: #ccc;
			padding: 30px;
			margin: 30px;
		}
		.subxx{
			width: 180px;
			height: 100%;
			background-color: #007FFF;
			float: left;
			border: 1px solid royalblue;
			margin: 2px;
		}
		.subxx2{
			width: 180px;
			height: 100%;
			background-color: green;
			float: left;
			border: 1px solid royalblue;
			margin: 2px;
		}
	</style>
	<body>
		<div id="test11"  class="xx" >
			<div id="a1" class="subxx">11111</div>
			<div id="a2" class="subxx">22222</div>
		</div>
		<div id="test22"  class="xx">
			<div id="a3" class="subxx2">3333333</div>
			<div id="a4" class="subxx2">4444</div>
		</div>
		<script>
	 $( ".xx" ).sortable({
	 	connectWith: ".xx"
    }).disableSelection();
	 	
	 	
$('.xx').bind('DOMNodeInserted', function(e) {
	var id = $(this).attr("id");
	arr[id]=id;
	console.log(arr);
//  alert('element now contains: ' + $(e.target).html());
//		console.log(e)
	console.log($(this).attr("id"));
	var eleid = $(e.target).attr("id");//被拖拽元素
	var str = '<div id="'+eleid+'" style="width:280px;" class="subxx2">555</div>'
	var ht = $(e.target).html();
	$(this).find("div").width(280);
	var k = Object.keys(arr); //2个盒子
	if(k.length>1){
		$("#"+k[0]).find("#"+eleid).remove();//拖拽前的 
		$("#"+k[k.length-1]).find("#"+eleid).replaceWith(str);//拖拽后的盒子
	}
	/*$(this).find("div").each(function(i,ele){
		var id = $(ele).attr("id")
		if(id == eleid){
			$(ele).replaceWith(str);
			console.log("下标"+i)
		}
//		console.log($(ele).attr("id"))
	});*/
	console.log('-----------------')
//	$(e.target).remove();
//	$(this).append(ht);
	
//	console.log($(this).html())
//	console.log($(this).length)
});	
			
//			var n = (Math.random()*100).toFixed(2) - 0;
//			console.log((Math.random()*100).toFixed(2))
//			console.log(n)
//			$(".xx").html("<ul>uuu</ul>");
			
			
//			$("div").addEventListener('load', function(){
//				console.log("addEventListener")
//			});

 
			
		</script>
	</body>
</html>
